Adding Code for an HTML5 Project

The HTML5 Prizm Content Connect sample demonstrates the use of a JavaScript component, pccViewer, which communicates with a web service using a RESTful scheme as noted in the RESTful Web API topic. To add the html5 viewer, the following script files are required to be added for the web page:

jquery-1.7.2.min.js
jquery-ui-1.8.21.custom.min.js
pccViewer.js

Along with a script (similar to the following) tying a desired document to be viewed to the pccViewer control object:

CS.NET Example	Copy Code
: <script type="text/javascript"> var documentName1 = '<%=document%>' $(document).ready(function () { var pluginOptions1 = { documentID: documentName1, toolboxMenuOpen: false, annotationID: 'Annotation Filename', uiElements: { toolTips: true, fullScreenToggle: true, firstLastPage: false} } $("#imageGearPageView").pccViewer(pluginOptions1); }); </script>

CS.NET Example

Copy Code

:
<script type="text/javascript">
 var documentName1 = '<%=document%>'
 $(document).ready(function () {
 var pluginOptions1 = { documentID: documentName1, toolboxMenuOpen: false, annotationID:
     'Annotation Filename', uiElements: { toolTips: true, fullScreenToggle: true,
      firstLastPage: false} }
 $("#imageGearPageView").pccViewer(pluginOptions1);
        });
</script>

The pluginOptions1 description can be found in the HTML5 Viewer topic.

The imageGearPageView object is named div object where the viewer will be anchored:

CS.NET Example	Copy Code
: <div id="imageGearViewer"> <div id="imageGearPageView"> </div> </div>

To set up the service web environment, either a traditional web.config file can be used or a more generic .xml file like the prizmconfig.xml used in the HTML5 sample. The prizmconfig.xml contains named tags or elements which specify where documents are obtained, where intermediate images are cached and where the imaging services, the proxyserver, can be located for its image rendering services.

XML Element	Content	Purpose
EnableDocumentPath	True or False	When set to True, this parameter restricts the web tier samples to load documents from the path specified by DocumentPath. Otherwise, it allows loading documents from any path.
DocumentPath	%ALLUSERSPROFILE%\Accusoft\Prizm\Documents	Location of document folder for displaying document images.
TempcachePath	%ALLUSERSPROFILE%\Accusoft\Prizm\Cache	Location where the proxyserver will deposit rendered images. The parameter contained within the percentage symbols, ALLUSERSPROFILE, is an environmental parameter denoting the default base path for reading and writing access.
MarkupsPath	%ALLUSERSPROFILE%\Accusoft\Prizm\Markups	Location where named annotation files are stored and retrieved.
WebServiceScheme	http	Communication protocol to the proxyserver.
WebServiceHost	localhost	Domain or host of the proxyserver.
WebServicePort	18660	Port number for proxyserver.

These elements can be changed or added to suit the environment needed by the deployed prizm application. In the HTML5 sample, the PccConfig code file is used to parse these tags and provide a property interface for each xml element.

The PccConfig code file has a static method, LoadConfig, which can be used like the following code snippet to obtain the environmental parameters to execute the web tier service of the application. The call should be made early in the web application page using the prizm services.

Example	Copy Code
<body> : <% // Environmental Setup PccConfig.LoadConfig("prizmconfig.xml"); %> : </body>

The other code file pieces needed have to do with supporting the pccViewer RESTful communication scheme to the service side Web tier and onto the proxyserver image rendering service.

File	Description
App_Code Folder	Contains the supporting classes for environmental configuration and the RESTful communication scheme between the pccViewer and web tier service. While the code body for the classes can be modified as needed, the APIs modifications need careful care if changed. See PCC.ashx.
PccViewerServices	Assembly shared for both vb and c# samples. Source is in a separate directory and moves the communication backend between the web tier and imaging services (proxy server) into its own namespace and class objects. See the PccViewerServices topic section for details.
Js folder	Contains the required Javascript files making up the pccViewer entity.
Images folder	Graphics for pccViewer.
Css folder	Web style sheet for the pccViewer.
Default.aspx	The default web starting page. The pccViewer would typically reside on this page.
PCC.ashx	File which defines and links the required prizm RESTful interface to the files in the App_Code folder. The client side pccViewer Javascript object will use this RESTful interface as described in RESTful Web API. File is required for the functionality of the IIS ASP.NET environment.
Prizmconfig.xml	Contains modifiable parameter content locations for documents, cache folder and proxyserver connection.
Web.config	Contains IIS and web tier settings.
Sample.doc	For the HTML5 sample, the test document used to illustrate the functional prizm content connect product.

With all these pieces, a web application page can be put together using a query parameter to pass in the document to be viewed. The following HTML5 sample illustrates a simple web Default.aspx application solution using the document parameter for the query string to get the document to view:

CS.NET Example	Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>PCC HTML5 Sample</title> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link href="Default.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> <script src="js/pccViewer.js" type="text/javascript"></script> </head> <body> <form id="Form1" runat="server"> <div id="confidentialNotice"><p>Content Connect Sample</p> </div> <% // Environmental Setup PccConfig.LoadConfig("prizmconfig.xml"); string document; document = Request.QueryString["document"]; if (document == null) { Response.Write("You must include the name of a document in the URL.<br/>"); Response.Write("For example, click on this link: <a href=\"Default.aspx?document=sample.doc\">Default.aspx?document=sample.doc</a>"); return; } string documentLocation = PccConfig.DocumentFolder; string tempLocation = PccConfig.TempFolder; string originalDocument = System.IO.Path.Combine(documentLocation, document); %> <script type="text/javascript"> var documentName1 = '<%=document%>' $(document).ready(function () { var pluginOptions1 = { documentID: documentName1, toolboxMenuOpen: false, annotationID: 'Annotation Filename', uiElements: { toolTips: true, fullScreenToggle: true, firstLastPage: false } } $("#imageGearPageView").pccViewer(pluginOptions1); }); </script> <div id="imageGearViewer"> <div id="imageGearPageView"> </div> </div> </form> </body> </html>

CS.NET Example

Copy Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PCC HTML5 Sample</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link href="Default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <script src="js/pccViewer.js" type="text/javascript"></script>
</head>
<body>
    <form id="Form1" runat="server">
     <div id="confidentialNotice"><p>Content Connect Sample</p>
    </div>
<%
    // Environmental Setup
    PccConfig.LoadConfig("prizmconfig.xml");
   
    string document;
    document = Request.QueryString["document"];
    
    if (document == null)
    {
        Response.Write("You must include the name of a document in the URL.<br/>");
        Response.Write("For example, click on this link:
        <a href=\"Default.aspx?document=sample.doc\">Default.aspx?document=sample.doc</a>");
        return;
    }
   
    string documentLocation = PccConfig.DocumentFolder;
    string tempLocation = PccConfig.TempFolder;
    string originalDocument = System.IO.Path.Combine(documentLocation, document);
%>   
  <script type="text/javascript">
    var documentName1 = '<%=document%>'
    $(document).ready(function () {
        var pluginOptions1 = { documentID: documentName1, toolboxMenuOpen: false, annotationID: 'Annotation Filename', uiElements: { toolTips: true, fullScreenToggle: true, firstLastPage: false } }
        $("#imageGearPageView").pccViewer(pluginOptions1);
    });
  </script>
    <div id="imageGearViewer">
        <div id="imageGearPageView">
        </div>
    </div>
    </form>
</body>
</html>